<template>
  <div class="inner">
    <el-tag>{{ label }}:</el-tag>

    <slot name="preGroup"
          :hobbies="hobbies" :sampleD="sampleD" :show="show"></slot>

    <el-button-group>
      <el-button type="danger" v-for="(e, i) in hobbies" :key="i" @click="show">
        {{ e }}
      </el-button>
    </el-button-group>
    <slot name="afterGroup"></slot>
    <div>=========================</div>
    <slot :hobbies="hobbies"></slot>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "Inner",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
    label: {
      type: String,
      default: "爱好",
    },
    channel: Number,
  },
  data() {
    return {
      sampleD: "value",
      // label: "爱好",
      hobbies: ["basketball", "football", "running"],
      sampleY: "ppp",
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    show() {
      this.$message.warning(JSON.stringify(this.hobbies));
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
    channel(n, o) {
      // this.$message.error(`新的值：${n} 旧的值：${o}`)
      this.show();
    },
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.inner {
  background-color: rgba(203, 89, 216, 0.54);
  min-height: 200px;
}
</style>
